import animation_data from "./Animation - 1718437742922.json";
import line_animation from "./Animation - 1710918136072.json";
import heart_animation from "./Animation - 1737032148291.json";
import GeneralCard from "../../components/GeneralCard";
import Lottie from "lottie-react";
import { Divider } from "@heroui/react";
import LottieAnimation from "./LottieAnimation";

/**
 *
 * @deprecated 使用新组件
 */

export default function IndexMainHome() {
  return (
    <>
      <GeneralCard
        classNames={{
          base: "w-[100%] h-[100%] bg-transparent",
          warpper: "flex justify-center items-center h-[100%]",
          body: "p-0 overflow-hidden",
        }}
        radius="none"
        shadow="none"
      >
        <div className="hero bg-transparent h-[100%]">
          <LottieAnimation
            options={{
              animationData: heart_animation,
              autoplay: true,
              loop: true,
            }}
            styles={{
              position: "absolute",
              bottom: "35%",
              right: "10%",
              height: 400,
              zIndex: 0,
            }}
          ></LottieAnimation>

          <div className="hero-content flex-shrink h-[100%] lg:flex-row p-0 justify-around">
            <LottieAnimation
              options={{ animationData: animation_data, autoplay: true }}
              styles={{ height: 900 }}
            ></LottieAnimation>
            <div className="ml-4">
              <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-500 via-slate-300 to-gray-600">
                Box Office News!
              </h1>
              <p className="py-6 text-xl bg-clip-text text-transparent bg-gradient-to-r from-sky-200 via-gray-400 to-zinc-200">
                Provident cupiditate voluptatem et in. Quaerat fugiat ut
                assumenda excepturi exercitationem quasi. In deleniti eaque aut
                repudiandae et a id nisi.
              </p>
              <button className="btn btn-primary">Get Started</button>
            </div>
          </div>
        </div>
        <Divider></Divider>
      </GeneralCard>
      <GeneralCard
        classNames={{
          base: "w-[100%] h-[100%]",
          warpper: "flex justify-center items-center h-[100%]",
          body: "p-0 overflow-hidden",
        }}
      >
        <div className="hero bg-transparent h-[100%]">
          <LottieAnimation
            options={{ animationData: line_animation, autoplay: true }}
            styles={{
              position: "relative",
              top: "-12%",
              right: "-25%",
              height: 900,
              rotate: "-45deg",
              transform: "scaleX(-1)",
            }}
          ></LottieAnimation>
          <LottieAnimation
            options={{
              animationData: heart_animation,
              autoplay: true,
              loop: true,
            }}
            styles={{
              position: "absolute",
              bottom: "35%",
              left: "10%",
              height: 400,
              zIndex: 0,
            }}
          ></LottieAnimation>
          <div className=" w-[100%] h-[100%]"></div>
          <div className="hero-content flex-col lg:flex-row-reverse">
            <div>
              <h1 className="text-5xl font-bold">Box Office News!</h1>
              <p className="py-6">
                Provident cupiditate voluptatem et in. Quaerat fugiat ut
                assumenda excepturi exercitationem quasi. In deleniti eaque aut
                repudiandae et a id nisi.
              </p>
              <button className="btn btn-primary">Get Started</button>
            </div>
          </div>
        </div>
        <Divider></Divider>
      </GeneralCard>
      <GeneralCard
        classNames={{
          base: "w-[100%] h-[100%]",
          warpper: "flex justify-center items-center h-[100%]",
          body: "p-0",
        }}
      >
        <div
          className="hero h-[100%]"
          style={{
            backgroundImage:
              "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
          }}
        >
          <div className="hero-overlay bg-opacity-60"></div>
          <div className="hero-content text-neutral-content text-center">
            <div className="max-w-md">
              <h1 className="mb-5 text-5xl font-bold">Hello there</h1>
              <p className="mb-5">
                Provident cupiditate voluptatem et in. Quaerat fugiat ut
                assumenda excepturi exercitationem quasi. In deleniti eaque aut
                repudiandae et a id nisi.
              </p>
              <button className="btn btn-primary">Get Started</button>
            </div>
          </div>
        </div>
      </GeneralCard>
    </>
  );
}
